<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
    <style>
        
    </style>
</head>
<body>
    <div>
        <button id="re">重新开启一局游戏</button>
    </div>
    <div>
        <span>请输入要猜的数字</span>
        <input type="text">
        <button id = "guess">猜</button>
    </div>
    <div>
        <span>已经猜的次数:</span>
        <span id="count">0</span>
    </div>
    <div>
        <span>结果:</span>
        <span id = "result"></span>
    </div>

    <script>
        let num = document.querySelector('input');
        let rebutton = document.querySelector('#re');
        let guessbutton = document.querySelector('#guess');
        let count = document.querySelector('#count');
        let fin = (parseInt)(Math.random()*100)+1;
        
        let result = document.querySelector('#result');

        
        guessbutton.onclick = function() {
            if(num.value > fin) {
                result.innerHTML = '猜大了';
            }else if(num.value<fin) {
                result.innerHTML = '猜小了';
            }else{
                result.innerHTML = '猜对了';
            }
            let count1 = parseInt(count.innerHTML);
            count.innerHTML = count1+1;
        }
        rebutton.onclick = function() {
            fin = (parseInt)(Math.random()*100)+1;
            num.value = '';
            count.innerHTML = 0;
        }
        
    </script>
    
    
</body>
</html>